<template>
	<view class="relative" style="height: 100%; width: 100%; color: #fff">
		<video style="height: 100%; width: 100%" loop="true" autoplay="true" :ad-unit-id="isVipExpired ? "" : 'adunit-e152689988be9a8e'" :src="href" objectFit="cover"
			:show-center-play-btn="false" :show-fullscreen-btn="false" :controls="false"></video>
		<view class="fixed inset" style="z-index: 999">
			<!-- #ifndef MP-TOUTIAO -->
			<view class="flex absolute header" style="left: 15rpx; align-items: center">
				<u-icon :name="globalIcon.returnIcon" size="28" @click="back"></u-icon>
				<text style="margin-left: 25rpx; font-size: 1.3rem">Reels</text>
			</view>
			<!-- #endif -->
			<view class="flex-column absolute" style="bottom: 40rpx; left: 20rpx">
				<view class="flex" style="align-items: center">
					<u-avatar size="35" :src="globalIcon.headPortrait"></u-avatar>
					<view class="username">
						<view class="top">
							<text>{{ userName }}</text>
							<uni-icons type="checkbox-filled" color="skyblue" size="17"></uni-icons>
						</view>
					</view>
				</view>
				<view style="max-width: 80vw;">
					{{ infos.edge_media_to_caption }}
				</view>
			</view>
			<view class="flex-column absolute row-gap-20" style="bottom: 220rpx; right: 10rpx">
				<view class="flex-column center">
					<u-icon :name="globalIcon.play" size="28"></u-icon>
					<text>{{ infos.play_count }}</text>
				</view>
				<view class="flex-column center">
					<u-icon name="heart" color="#fff" size="28" @click="love"></u-icon>
					<text>{{ infos.edge_liked_by }}</text>
				</view>
				<view class="flex-column center">
					<u-icon name="chat" color="#fff" size="28" @click="openComment"></u-icon>
					<text>{{ infos.edge_media_to_comment }}</text>
				</view>
				<view class="flex-column center">
					<u-icon :name="globalIcon.sendIcon" size="23" @click="share"></u-icon>
				</view>
				
			</view>
			<view class="hightlight-util" v-if="!isVipExpired" style="bottom: 30rpx;">
				<ad-custom unit-id="adunit-a542e42550500ee9"></ad-custom>
			</view>
		</view>
	</view>
</template>

<script>
	import Config from "@/common/config.js";
	import {
		formatDay
	} from "@/utils/utils.js";
	export default {
		name: "video_detail",
		data() {
			return {
				href: "",
				infos: "",
			};
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			let interstitialAd11 = wx.createInterstitialAd({
				adUnitId: 'adunit-af52896212f94e7b'
			})
			interstitialAd11.show().catch((err) => {
				console.error(err)
			})
			// #endif
			let channel = this.getOpenerEventChannel();
			channel.on("transformData", (res) => {
				console.log(res);
				this.infos = res.data;
			});
			let shortCode = options.shortCode;
			this.href = Config.static_url + 'ins_img/' + shortCode + ".mp4";
		},
		methods: {
			back() {
				wx.navigateBack();
			},
			openComment() {
				wx.navigateTo({
					url: `/subA/comment/comment`,
					success: (res) => {
						res.eventChannel.emit("transformData", {
							edgeId: this.infos.edge_id,
							times: this.times,
							comtent: this.infos.edge_media_to_caption,
						});
					},
				});
			},
		},
		computed: {
			userName() {
				return this.$store.getters.userName;
			},
			times() {
				return this.infos?.taken_at_timestamp ?
					formatDay(this.infos.taken_at_timestamp) :
					"";
			},
			isVipExpired(){
				console.log('$store.getters.getVipExpired', this.$store.getters.getVipExpired)
				return this.$store.getters.getVipExpired
			}
		},
	};
</script>

<style>
	.header {
		top: var(--status-bar-height);
	}

	.inset {
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	
	.hightlight-util {
		position: absolute;
		bottom: 220rpx;
		right: 25rpx;
		display: flex-column;
		column-gap: 10rpx;
		z-index: 1002;
	}
</style>